<template>
	<view class="good_container">
		<view class="good_title">
			{{title}}
		</view>

		<view class="good_card_list">
			<view v-for="(item,index) in list" :key="index">
				<good-card :goodItem='item'></good-card>
			</view>
		</view>

		<view class="good_more">
			<navigator class="goods_more_btn" url="">查看更多</navigator>
		</view>
	</view>
</template>

<script setup>
	defineProps(["title", 'list'])
</script>

<style lang="scss" scoped>
	.good_container {
		width: 100%;
		margin: 35rpx 0;
		border-radius: 16rpx;
		box-shadow: 0 20rpx 5rpx rgba(0, 0, 0, 0.3);

		.good_title {
			text-align: center;
			font-size: 40rpx;
			line-height: 52rpx;
			font-weight: bold;
			color: #232628;
			padding: 20rpx 0 0rpx 0rpx;
		}

		.good_card_list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}

		.good_more {
			margin: 20rpx 0;

			.goods_more_btn {
				display: block;
				margin: 0 auto;
				background: #ffffff;
				border-radius: 20px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
				color: rgba(35, 38, 40, 0.7);
			}
		}
	}
</style>